<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>订单支付</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuimini/css/public.css" media="all">
    <link rel="stylesheet" href="/layuimini/js/lay-module/step-lay/step.css" media="all">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script th:src="@{/js/jquery.cookie.js}"></script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">订单号:</label>
                                        <div class="layui-input-block">
                                            <input type="text" readonly="readonly" name="orderId" id="orderId" th:value="${order.id}" placeholder="请填写入款人游戏ID" class="layui-input" lay-verify="number" required />
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">总金额:</label>
                                        <div class="layui-input-block">
                                            <input type="text" readonly="readonly" name="payment" id="payment" th:value="${order.payment}" placeholder="请填写入款人游戏ID" class="layui-input" lay-verify="number" required />
                                            <!--<input type="number" placeholder="请填写入款金额" readonly="readonly"  class="layui-input" lay-verify="number" required>-->
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">支付类型:</label>
                                        <div class="layui-input-block">
                                            <select id="payTypeSelect"  lay-verify="required"  lay-filter="checkIsVip">
                                                <option value="1" selected>原价支付</option>
                                                <option value="2">积分抵消支付</option>
                                            </select>
                                        </div>
                                    </div>
                                   <!-- <div class="layui-form-item">
                                        <label class="layui-form-label">入款方式:</label>
                                        <div class="layui-input-block">
                                            <select lay-verify="required">
                                                <option value="1" selected>人工入款</option>
                                                <option value="2">修正</option>
                                                <option value="3">活动</option>
                                                <option value="4">佣金</option>
                                            </select>
                                        </div>
                                    </div>-->
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注说明:</label>
                                        <div class="layui-input-block">
                                            <textarea id="remarks" type="text" placeholder="游客购票留言" class="layui-textarea" name="remarks"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">订单号:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux"><span th:name="orderId" th:text="${order.id}"></span></div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">总金额:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux"><span th:name="payment" th:text="${order.payment}"></span></div>
                                            <!--<div class="layui-form-mid layui-word-aux">3000 元（保险箱：1000，现金：2000）</div>-->
                                        </div>
                                    </div>
                                    <!--<div class="layui-form-item">
                                        <label class="layui-form-label">入款金额:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">
                                                <span style="font-size: 18px;color: #333;">1800 元</span>
                                            </div>
                                        </div>
                                    </div>-->
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">支付类型:</label>
                                        <div class="layui-input-block">
                                            <div id="payType" class="layui-form-mid layui-word-aux">原价支付</div>
                                        </div>
                                    </div>
                                   <!-- <div class="layui-form-item">
                                        <label class="layui-form-label">入款方式:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">人工入款</div>
                                        </div>
                                    </div>-->
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注说明:</label>
                                        <div class="layui-input-block">
                                            <textarea id="remarksLocked" placeholder="游客购票留言" class="layui-textarea" name="remarks" readonly></textarea>
                                            <!--<div id="remarksLocked" class="layui-form-mid layui-word-aux" name="remarksLocked">备注说明</div>-->
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;确认支付&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!--<div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        入款成功
                                    </div>
                                    <div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn next">再入一笔</button>
                                    <button class="layui-btn layui-btn-primary">查看账单</button>
                                </div>
                            </div>-->
                        </div>
                    </div>
                    <hr>
                    <div style="color: #666;margin-top: 30px;margin-bottom: 40px;padding-left: 30px;">
                        <h3>说明</h3><br>
                        <h4>支付方式仅支持支付宝支付</h4>
                        <p>如带来不便，敬请谅解。</p>
                        <br><h4>快递指定</h4>
                        <p>默认中通快递，如果需要，可以指定快递。</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use([ 'form', 'step'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step;
        /*var layedit = layui.layedit;
        var content = layedit.build('remarks'); //建立编辑器这里的ID是上面的id*/
        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '完善订单信息'
            }, {
                title: '确认支付'
            }]
        });
        form.on('select(checkIsVip)', function (data) {
            var payType = $("#payTypeSelect option:selected").val();
            if (payType == "2") {
                $.ajax({
                    url: "/user/checkIsVip",
                    type: "get",//请求类型
                    contentType:  "application/json; charset=utf-8",
                    dataType: "json",//服务端返回给浏览器的数据类型
                    success: function (result) {//执行成功的回调函数,次data非彼data，是服务器端返回的json的一个变量
                        if (result.code == 200) {
                            var length = result.msg.length;
                            length > 0 ?  layer.msg(result.msg, {
                                offset: '15px',
                                icon: 5,
                                time: 1000
                            }, function() {
                                $('#payTypeSelect')[0].selectedIndex = 0
                            }) : ""
                        } else {
                            layer.msg(result.msg, {
                                icon: 5
                            });
                        }
                    }
                });
            }
            form.render('select');
        });


        form.on('submit(formStep)', function (data) {
            var payType = $("#payTypeSelect option:selected").val();
            if (payType == "1") {
                $("#payType").html("原价支付")
            } else if (payType == "2") {
                $("#payType").html("积分抵消支付")
            }
            $("#remarksLocked").val($("#remarks").val())
            step.next('#stepForm');
            return false;
        });


        form.on('submit(formStep2)', function (data) {


            var orderId = $("#orderId").val();
            var payment = $("#payment").val();
            var remarks = $("#remarks").val();
            var payType = $("#payTypeSelect option:selected").val();
            /*alert($("#payTypeSelect option:selected").val())
            alert(remarks)*/
            var parma = {
                "orderId" : orderId,
                "payment" : payment,
                "remarks" : remarks,
                "payType" : payType
            }
            $.ajax({
                url: "/fore_orders/doPayForOrder",
                type: "post",//请求类型
                data: JSON.stringify(parma),
                contentType:  "application/json; charset=utf-8",
                dataType: "html",//服务端返回给浏览器的数据类型
                success: function (result) {//执行成功的回调函数,次data非彼data，是服务器端返回的json的一个变量
                    window.open('', "_blank",'').document.write(result)
                    if (result.code == 200) {
                        layer.msg('付款成功', {
                            offset: '15px',
                            icon: 1,
                            time: 1000
                        }, function() {
                            location.href = 'index'; //后台主页
                            // location.href="javascript:history.go(-1)"
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 5
                        });
                    }
                }
            });
            step.next('#stepForm');
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });
    })
</script>
</body>
</html>
